<template>

    <div class="container">
      <Head></Head>
        <van-nav-bar @click-left="onClickRight" @click-right="goNav">
            <template #left>
                <van-icon name="arrow-left" size="23" color="#fff" />
            </template>

            <template #title>
                <div style="color:#ffffff">{{goodsdetail.detail.title}}</div>
            </template>
        </van-nav-bar>
        <!-- <div class="user1">
            <img class="user_img" src="@/assets/user.png" />
        </div> -->
        <div class="topswiper">
            <goods-swiper :banners="goodsdetail.detail.cover"></goods-swiper>
          <div>
            <h2 class="product-name-box"><span class="prod-name">{{goodsdetail.detail.title}}</span></h2>
            <p class="desc">{{goodsdetail.detail.description}}</p>
          </div>
          <div class="Line"></div>
          <div class="detail-box" id="anchorImg">
            <div class="detail-imgs-box">
              <div class="detail-title">{{$t('shop.info.detailtitle')}}</div>
              <div class="detail-imgs-box-cont">
                <div class="conhtml">
                  <p v-for="item in goodsdetail.detail.details" :key="item">
                    <img :src="item" alt="">
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-box" id="anchorStand">
          <div class="RelatedMerchandise">{{$t('shop.info.like')}}</div>
          <div class="detail-standard">
            <div class="goodslist">
              <div class="content"  v-if="goodsdetail.like_goods.length >0">
                <van-card
                    v-for="item in goodsdetail.like_goods" :key="item.id"
                    :tag="item.is_recommend == 1 ? $t('shop.info.recommend') : ''"
                    :num="item.stock"
                    :desc="item.description"
                    :title="item.title"
                    @click="itemClick(item.id)"
                >

                  <template #thumb>
                    <div class="thumb"><img v-lazy="item.cover_url" alt=""></div>
                  </template>
                  <template #price>
                    <div class="sales"> <van-icon name="clock-o" /> {{item.updated_at.substr(0,10)}}</div>
                  </template>
                </van-card>

              </div>

              <div v-else style="text-align:center;font-size:14px;padding-top:60px;">
                <span style="color:#EFEFEF">{{$t('shop.info.nogoods')}}</span>
              </div>
            </div>
          </div>
        </div>

    </div>
</template>

<script>


    import GoodsSwiper from './ChildComps/goodsSwiper'
//    import i18n from '@/i18n';
    import data from 'network/goods_data.js'
    import Head from "@/components/head.vue";

    export default {
        name: 'DetailC',
        components:{
            Head,
            GoodsSwiper,

        },
        data() {
            return {
                id:this.$route.query.id,
                goodsdetail: {
                    detail:{},
                    like_goods:[]
                }
            };
        },



        mounted() {
            this.getGoodsDetail(this.id);
        },

        watch:{
            id(newv, oldv){
                if(newv != oldv) {
                    this.getGoodsDetail(oldv);
                }
            },
        },
        methods: {
            goNav() {
                this.$router.push('/nav')
            },
            itemClick(id){
                this.id = id;
                this.$router.push({path:'/detail', query:{id}});
            },

            getGoodsDetail(oid){
                this.id = this.$route.query.id;



                if(this.id == undefined){
                    return
                }



                const zdata = data[this.$i18n.locale].map(item=>{
                    if(item.id == oid) {

                        const banners = item.cover.split("#").map(item=>{
                            item = require("@/assets/dimgs/"+item);
                            return item;
                        })
                        this.goodsdetail.detail.cover = banners
                        this.goodsdetail.detail.title =  item.title
                        this.goodsdetail.detail.description =  item.description


                        //  this.goodsdetail.detail.details = dstr.split('#')
                       this.goodsdetail.detail.details = item.details.split('#').map(item2=>{
                           let arr = [];
                            arr.push(require("@/assets/dimgs/"+item2));
                           return arr;
                       });


                    }

                //    item.cover_url=require("@/assets/dimgs/" + (JSON.parse(item.cover).a ?? JSON.parse(item.cover).b));
                    item.cover_url=require("@/assets/dimgs/" + item.cover.split("#")[0]);

                    return item;
                });

              

                this.goodsdetail.like_goods = zdata;
            },

            onClickRight() {
                console.log("router");
                this.$router.back();
            },
        }

    }
</script>
<style>
    .conhtml {
        min-height: 200px;
        text-align: left;
        padding:15px !important;
        border-radius: 14px;
    }


    .conhtml img {
        max-width: 100% !important;
        height: auto !important;

    }
    .van-card {
        border-radius: 14px;
        background-color: #181818;
        color:#FEFEFE;
        margin-left:15px;
        word-break: unset !important;
        white-space:normal !important;
        word-wrap: break-word !important;
        border: 1px solid #FFFFFF;
        margin-bottom: 20px;
        box-shadow: 0 10px 50px -25px rgb(0,0,0) ;

    }
    .van-card__title {
        word-break: unset !important;
        white-space:normal !important;
        word-wrap: break-word !important;

    }

    .van-card__desc {
        display: -webkit-box;
        color: #DEDEDE;
        font-size:10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: unset !important;
        max-height: 55px;
        white-space:normal !important;
        word-wrap: break-word !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      /* Group 1707480035 */



    }

    .van-card__price {

        color: #DBDBDD;

    }

    .van-card__num {
        color: #BABABA;
    }

    .van-sidebar-item--select, .van-sidebar-item--select:active {
        background-color: #1F1B19 !important;
        width:82px !important;
    }

    .van-sidebar-item--select {
        color: #EFEFEF;
    }

    .van-sidebar-item--select::before {

        background-color: #FB6300;

    }

    .van-sidebar-item {

        color: #EFEFEF;
        background-color: #000000;
    }

    .van-sidebar {
        overflow-y: unset;

    }


</style>
<style scoped>
    .topswiper {
      /* Rectangle 1056 */
      box-sizing: border-box;
      width: auto;
      background: #0C0D0E;
      border: 1px solid #FFFFFF;
      box-shadow: -16px 16px 60px #0F1012, inset 0.5px -0.5px 0px #37BAEB, inset -0.5px 0.5px 0px #EAAC82;
      backdrop-filter: blur(8px);
      /* Note: backdrop-filter has minimal browser support */
      border-radius: 14px;
      z-index: 10;
      overflow: hidden;
      margin-right: 10px;
      margin-left: 10px;
    }
    .head{
      display: flex;

    }
    .product-name-box{
      /* 黑参制品 */
      position: absolute;
      height: 20px;
      left: calc(50% - 100%/2 + 12px);
      top: 290px;
      z-index: 1;
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 693;
      font-size: 16px;
      line-height: 20px;
      /* identical to box height, or 125% */
      letter-spacing: -0.02em;

      color: #FB8417;
    }
    .RelatedMerchandise{
      /* 相关商品 */
      width: 100%;
      height: 15px;
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 398;
      font-size: 12px;
      line-height: 15px;
      /* identical to box height, or 125% */
      text-align: center;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      background: none;
      margin: 15px auto;
    }
    .Line{
      /* Line 1 */


      margin-top: 10px;
      opacity: 0.5;
      border: 1px solid #FFFFFF;

    }
    .product-box {
        background: #000000;

        color: #EFEFEF;
        padding: 1.2rem;
    }

    .product-box .price-box {
        color: #EE822F;
        margin-top: 0.4rem;
    }

    .product-box .price-box .price {
        position: relative;
    }

    .product-box .price-box .price .cur-price {
        font-size: 1.6rem;
    }
    .price .cur-price {
        color: #EE822F;
        font-size: 1.3rem;
        font-weight: 700;
    }

    .product-box .price-box .vip-price {
        display: none;
    }


    .product-box{
        color: #EFEFEF;
        font-size: 1.26rem;
        font-weight: 400;
        line-height: 1.6rem;
        margin-top: 0.4rem;

        white-space:normal !important;
        word-wrap: break-word !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .product-box .more a {
        color: #FFC000;
        margin-right: 3px;
        text-decoration: underline;
    }


    .detail-box {
      margin-top: 0.8rem;
      overflow: hidden;
      width: 100%;
    }

    .detail-title {
      /* 商品介绍 */
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 398;
      font-size: 12px;
      line-height: 15px;
      /* identical to box height, or 125% */
      text-align: center;
      letter-spacing: -0.02em;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #FFFFFF;


    }


    img,p {
        -webkit-text-size-adjust: none;
        border: none;
        font-size: 100%;
        font-style: normal;
        margin: 0;
        outline: 0;
        padding: 0;
        vertical-align: baseline;
    }


    .detail-box .detail-imgs-box p, .detail-box .detail-imgs-box img, .detail-box .detail-imgs-box .img-box, .detail-box .img-box img {
        vertical-align: middle;
        width: 100%;
        margin-top:0;
    }

    .detail-standard {

    }

    .goodslist {
        flex-grow: 1;
        padding: 15px 15px 15px 0 !important;
        flex: 1;
        position: relative;
        left: 0px;
        right: 0;
        text-align: left !important;
    }
    .goodslist .content {
        padding-top: 0px;
        position: relative;
        top:0px;
        left:0px;
        right:0;

    }


    .container {
      /* 产品-详情页 */

      background: linear-gradient(180deg, #0B0C0D 0%, #7B4413 100%);
      background-size: 100% 100%;
    }

    .van-nav-bar {
        background-color: #000;
    }

    .thumb {
        width:85px;
        height:85px;

    }
    .thumb img {
        width:85px;
        height:85px;
    }

    .desc {
      /* 黑参制品是指经过特定加工处理，以黑参为主要原料制成的各类产品。黑参，又称玄参，是一种具有悠久药用历史的中药材，富含多种对人体有益的成分。 */
      position: absolute;
      height: 75px;
      left: calc(50% - 100%/2);
      top: 330px;
      background: #000000;
      font-family: 'Dream Han Sans SC';
      font-style: normal;
      font-weight: 398;
      font-size: 12px;
      line-height: 15px;
      /* or 125% */
      letter-spacing: -0.02em;
      padding-left: 13px;
      color: #FFFFFF;
      box-shadow: 0 -10px 10px 0 rgba(0,0,0) ;
      overflow:hidden;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }

   </style>